<template>
    <PageView>
        <a-card title="列表">
            <a-row :gutter="10" class="inputGroup">
                <a-col :xs="12" :md="6" :lg="6" :xl="4">
                    <a-input v-model="searchData.username " placeholder="账号" @keyup.enter="getListTwo"/>
                </a-col>
                <a-col :xs="12" :md="6" :lg="6" :xl="4">
                    <a-select allowClear v-model="searchData.status" style="width:100%" placeholder="类型" @change="getListTwo">
                        <a-select-option value="1">未回复</a-select-option>
                        <a-select-option value="2">已回复</a-select-option>
                    </a-select>
                </a-col>
                <a-col :xs="12" :md="6" :lg="6" :xl="4">
                    <a-button-group>
                        <a-button type="primary" :loading="loading" @click="getListTwo">确定筛选</a-button>
                    </a-button-group>
                </a-col>
            </a-row>
            <a-table
                :loading="loading"
                :columns="columns"
                :dataSource="data"
                :pagination="{total,pageSize,showSizeChanger,current}"
                @change="changePagination"
                bordered :scroll="{x:true}">
            </a-table>
        </a-card>

        <!--聊天弹窗-->
        <a-modal :title="title" centered :visible="visible" :confirmLoading="confirmLoading" @cancel="closeDialog" width="450px">
            <div class="container" ref="container">
                <div v-for="(value,key) in messagesData" :class="[value.type]">
                    <div class="con">
                        <div class="head" v-if="value.type===`received`">
                            <a-icon type="user" />
                        </div>
                        <div class="contentCon">
                            <span class="time">{{timeOne(value.time)}}</span>
                            <div class="content">
                                {{value.text}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <template slot="footer">
                <div class="sendContainer">
                    <a-textarea v-model="content" :rows="1" autosize placeholder="请输入要发送的内容"/>
                    <a-button type="primary" :loading="confirmLoading" class="send" @click="handleOk">发送</a-button>
                </div>
            </template>
        </a-modal>
    </PageView>
</template>

<script type="text/jsx">
    import Message from '../../api/Message'
    export default {
        name: 'wordsList',
        data () {
            return {
                loading: true,
                columns: [
                    {
                        title: '账号',
                        dataIndex: 'username',
                        customRender: (v,) => <a>{v}</a>
                    },
                    {
                        title: '标题',
                        dataIndex: 'title',
                    },
                    /*{
                        title: '提交内容',
                        dataIndex: 'content',
                        customRender: (v) => <div style="min-width:300px;max-width:600px;white-space: normal;word-wrap:break-word;">{v}</div>
                    },
                    {
                        title: '回复内容',
                        dataIndex: 'huifu_content',
                        customRender: (v) => <div style="min-width:400px;max-width:800px;white-space: normal;word-wrap:break-word;">{v}</div>||"暂未回复"
                    },*/
                    {
                        title: '类型',
                        dataIndex: 'status',
                        customRender: (v) => {
                            let status = {
                                "1": { name: '未回复', color: 'error' },
                                "2": { name: '已回复', color: 'success' },
                                "3": { name: '已回复', color: 'success' },
                            }
                            return <a-badge status={status[v].color} text={status[v].name}/>
                        }
                    },
                    {
                        title: '提交时间',
                        dataIndex: 'add_time',
                        customRender: (v) => v?this.timeOne(v):"暂无"
                    },
                    /*{
                        title: '回复时间',
                        dataIndex: 'time',
                        customRender: (v) => v?this.timeOne(v):"暂未回复"
                    },*/
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 110,
                        customRender: (v) => {
                            return (
                                <a-button-group>
                                    <a-button
                                        type="primary"
                                        onClick={()=>{
                                            this.id = v.id
                                            this.messagesData = []
                                            this.content = ""
                                            this.huifuLook()
                                        }}>
                                        查看聊天
                                    </a-button>
                                </a-button-group>
                            )
                        }
                    }
                ],
                data: [],
                total: 0,
                pageSize: 10,
                current: 1,
                showSizeChanger: true,
                searchData: {
                    username: '',
                    status:undefined,
                },
                id:"",
                visible:false,
                confirmLoading:false,
                title:"",
                messagesData:[],//聊天记录数组
                content:"",//回复内容，
                timeNull:null,//定时器
            }
        },
        activated () {
            this.loading = true
            this.getList()
        },
        watch:{
            messagesData(n,o){
              if(n.length!== o.length)this.$nextTick(()=>this.$refs.container.scrollTop = this.$refs.container.scrollHeight)
          }
        },
        methods: {
            getListTwo () {
                this.current = 1
                this.loading = true
                this.getList()
            },
            getList () {
                clearInterval(this.timeNull)
                this.timeNull = setInterval(()=>this.getData(),5000)
                this.getData()
            },
            getData(){
                Message.msgList({
                    page: this.current,
                    num: this.pageSize,
                    ...this.searchData,
                }).then(res => {
                    this.data = res.data.map((value, key) => {
                        return { ...value, key }
                    })
                    this.loading = false
                    this.total = parseInt(res.count)
                })
            },
            changePagination (pagination) {
                Object.keys(pagination).forEach(val => {
                    this[val] = pagination[val]
                })
                this.getList()
            },
            showDialog(){
                clearInterval(this.timeNull)
                this.timeNull = setInterval(()=>this.huifuLook(),20000)
            },
            huifuLook(){
                Message.answerList({ question_id:this.id}).then(res => {
                    let sendArray = res.data.list.map(v=>{
                        return {
                            name: '我',
                            type: 'sent',
                            text: v.content,
                            time:Number(v.add_time)
                        }
                    })
                    let receivedArray = res.data.question.map(v=>{
                        return {
                            name: '用户',
                            type: 'received',
                            text: v.content,
                            time:Number(v.add_time)
                        }
                    })
                    this.title = res.title.title
                    this.sortTime([...sendArray,...receivedArray])
                    if(!this.visible){
                        this.showDialog()
                    }
                    this.visible = true
                })
            },
            handleOk(){
                if(this.content === ""){
                    this.$notification.warning({
                        message: '提示',
                        description:"请输入回复内容"
                    })
                    return
                }
                clearInterval(this.timeNull)
                this.confirmLoading = true
                Message.addAnswer({ question_id:this.id,content:this.content }).then(res => {
                    this.confirmLoading = false
                    this.content = ""
                    clearInterval(this.timeNull)
                    this.timeNull = setInterval(()=>this.huifuLook(),20000)
                    this.huifuLook()
                }).catch(res=>{
                    this.confirmLoading = false
                    clearInterval(this.timeNull)
                    this.timeNull = setInterval(()=>this.huifuLook(),20000)
                    this.huifuLook()
                })
            },
            /*按照时间排序*/
            sortTime(arr){
                const sortTime = (a,b)=>{
                    return a.time - b.time
                }
                this.messagesData = arr.sort(sortTime)
            },
            closeDialog(){
                clearInterval(this.timeNull)
                this.visible = false
                this.getList()
            }
        },
        deactivated () {
            clearInterval(this.timeNull)
        }
    }
</script>

<style scoped lang="less">
    .inputGroup {
        > div {
            margin-bottom: 20px;
        }
    }
    .container{
        height: 400px;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        >div{
            display: flex;
            align-items: center;
            &:not(:last-child){
                margin-bottom: 15px;
            }
            &.sent{
                justify-content: flex-end;
                .contentCon{
                    .content{
                        background: #1890ff;
                        color: #ffffff;

                    }
                    margin-right: 10px;
                }
            }
            &.received{
                justify-content: flex-start;
                .content{
                    background: rgba(0,0,0,0.1);
                }
            }
            .con{
                display: flex;
                align-items: flex-start;
                .head{
                    height: 30px;
                    width: 30px;
                    border-radius: 100%;
                    background: rgba(0,0,0,0.1);
                    margin-right: 5px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: rgba(0,0,0,0.3);
                }
                .contentCon{
                    .time{
                        font-size: 12px;
                        display: block;
                        margin-top: -5px;
                        margin-bottom: 5px;
                        color: rgba(0,0,0,0.3);
                    }
                    .content{
                        max-width: 220px;
                        padding: 5px 10px;
                        border-radius: 6px;
                    }
                }
            }
        }
    }
    .sendContainer{
        width: 100%;
        display: flex;
        align-items: center;
        .send{
            margin-left: 10px;
        }
    }
</style>